import './style.css'
//导入babylonjsa
import * as BABYLON from "babylonjs";
//导入gltf加载器
import "babylonjs-loaders";


// 创建canvas
const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//添加到body中
document.body.appendChild(canvas);

// 创建引擎，第二个参数表示是否启用抗锯齿
const engine = new BABYLON.Engine(canvas, true);

// 创建场景
const scene = new BABYLON.Scene(engine);

// 创建相机
const camera = new BABYLON.ArcRotateCamera(
  "camera", // 相机名称
  0, // 旋转角度
  0, // 俯仰角度
  10, // 半径
  BABYLON.Vector3.Zero(), // 相机位置
  scene // 场景
);
// 设置相机位置
camera.setPosition(new BABYLON.Vector3(0, 5, -10));

// 把相机添加到画布上，第二个参数表示是否阻止元素的默认操作
camera.attachControl(canvas, true);


// 创建球
// const sphere = BABYLON.MeshBuilder.CreateSphere(
//   "sphere", // 名称
//   { diameter: 2 }, // 半径
//   scene // 场景
// );

// 创建地面
const ground = BABYLON.MeshBuilder.CreateGround(
  "ground", // 名称
  { width: 16, height: 16 }, // 宽高
  scene // 场景
);
// 设置地面位置
// ground.position.y = -1;
ground.position.set(0, -1, 0)
// 创建地面材质
const groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
ground.material = groundMaterial;
// 设置地面材质漫反射颜色
groundMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0);
// 设置地面材质的高光
groundMaterial.specularColor = new BABYLON.Color3(0.2, 0.2, 0.2);
// 设置地面材质的发光
// groundMaterial.emissiveColor = new BABYLON.Color3(0, 1, 0);

// 设置地面的纹理
const groundTexture = new BABYLON.Texture("01.jpg", scene);
groundMaterial.diffuseTexture = groundTexture;
// 设置纹理是透明纹理
groundMaterial.diffuseTexture.hasAlpha = true;

// 设置地面材质的环境反射
groundMaterial.ambientColor = new BABYLON.Color3(0, 1, 0);
// 设置场景的环境光
scene.ambientColor = new BABYLON.Color3(1, 1, 1);
// 设置场景的背景色
scene.clearColor = new BABYLON.Color3(0.5, 1, 0.5);

// 加载gltf模型(加载特定的网格)
const result = await BABYLON.SceneLoader.ImportMeshAsync(
  null, // 网格名称，null 表示加载所有网格
  "gltf/", // 路径
  "1.glb", // 文件名
  scene // 场景对象
);
console.log(result, '111');
// 1. 获取所有网格
const meshes = result.meshes;

// 2. 获取根网格（通常是第一个网格）
const rootMesh = meshes[0];

// 3. 获取基本参数
const position = rootMesh.position;     // 位置
const rotation = rootMesh.rotation;     // 旋转
const scaling = rootMesh.scaling;       // 缩放
const boundingBox = rootMesh.getBoundingInfo().boundingBox; // 包围盒

// 4. 获取尺寸
const size = {
  width: boundingBox.maximumWorld.x - boundingBox.minimumWorld.x,
  height: boundingBox.maximumWorld.y - boundingBox.minimumWorld.y,
  depth: boundingBox.maximumWorld.z - boundingBox.minimumWorld.z
};

// 5. 获取材质
const materials = result.materials;

// 6. 获取动画
const animations = result.animationGroups;

// 7. 遍历所有子网格
meshes.forEach(mesh => {
  console.log('网格名称:', mesh.name);
  console.log('顶点数:', mesh.getTotalVertices());
  console.log('面数:', mesh.getTotalIndices() / 3);
});

// 8. 获取骨骼（如果有）
const skeletons = result.skeletons;

// 创建平面
// const plane = BABYLON.MeshBuilder.CreatePlane(
//   "plane", // 名称
//   // { width: 10, height: 10 }, // 宽高
//   { size: 10 }, // 宽高
//   scene // 场景
// );

// 创建box
const box = BABYLON.MeshBuilder.CreateBox(
  "box", // 名称
  { size: 2 }, // 尺寸
  scene // 场景
);
box.position.set(6, 0, 0)

// 旋转box绕Y轴旋转45度
// box.rotation.set(0, Math.PI / 4, 0)
// 绕着某个点旋转
box.rotateAround(
  new BABYLON.Vector3(0, 0, 0), // 旋转中心
  new BABYLON.Vector3(0, 1, 0), // 旋转轴
  Math.PI / 4 // 旋转角度
)

// 创建圆柱体
const cylinder = BABYLON.MeshBuilder.CreateCylinder(
  "cylinder", // 名称
  { diameterTop: 2, diameterBottom: 2, height: 1 }, // 半径、高度
  scene // 场景
);
cylinder.position.set(-6, 0, 6)
// 缩小圆柱
cylinder.scaling.set(1, 0.5, 1)

// 创建圆锥体
// const cone = BABYLON.MeshBuilder.CreateCylinder(
//   "cone", // 名称
//   { height: 2, diameterTop: 0, diameterBottom: 2, tessellation: 1000 }, // 高度、顶部半径、底部半径、细分度
//   scene // 场景
// );

// 创建圆环
// const torus = BABYLON.MeshBuilder.CreateTorus(
//   "torus", // 名称
//   { diameter: 2, thickness: 1, tessellation: 1000 }, // 外半径、厚度、细分度
//   scene // 场景
// );
// torus.position.set(3, -0.5, 0)
// // 缩小圆环
// torus.scaling.set(0.5, 0.5, 0.5)

// 光源
// const light = new BABYLON.HemisphericLight(
//   "light", // 名称
//   new BABYLON.Vector3(0, 1, 0), // 方向
//   scene // 场景
// );
// DirectionalLight 平行光
const light = new BABYLON.DirectionalLight(
  "light", // 名称
  new BABYLON.Vector3(-1, -1, 0), // 位置
  scene // 场景
);

// 点光源
// const light = new BABYLON.PointLight(
//   "light", // 名称
//   new BABYLON.Vector3(0, 5, 0), // 位置
//   scene // 场景
// );
// //设置点光源的颜色
// light.diffuse = new BABYLON.Color3(1, 0, 0);
// //设置点光源的高光颜色
// light.specular = new BABYLON.Color3(1, 1, 1);
// //设置点光源的强度
// light.intensity = 0.5;

// 创建聚光灯
// const spotLight = new BABYLON.SpotLight(
//   "spotLight", // 名称
//   new BABYLON.Vector3(0, 0, 5), // 位置
//   new BABYLON.Vector3(0, 0, -1), // 方向
//   Math.PI / 3, // 角度
//   2, // 强度
//   scene // 场景
// );
// //设置聚光灯的颜色
// spotLight.diffuse = new BABYLON.Color3(1, 1, 1);
// //设置聚光灯的高光颜色
// spotLight.specular = new BABYLON.Color3(1, 1, 1);
// //设置聚光灯的内切光角度
// spotLight.angle = Math.PI / 3;

// 阴影
// const shadowGenerator = new BABYLON.ShadowGenerator(1024, spotLight);
// shadowGenerator.useBlurExponentialShadowMap = true;
// shadowGenerator.useKernelBlur = true;
// shadowGenerator.blurScale = 2.0;
// shadowGenerator.addShadowCaster(sphere);
// shadowGenerator.addShadowCaster(ground);
// shadowGenerator.addShadowCaster(box);
// shadowGenerator.addShadowCaster(cylinder);
// shadowGenerator.addShadowCaster(cone);
// shadowGenerator.addShadowCaster(torus);
// 地面接收阴影
ground.receiveShadows = true;

// const myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
// //物体的漫反射颜色
// myMaterial.diffusecolor =new BABYLON.Color3(1,0,1);3
// //物体的高光颜色
// myMaterial.specularcolor =new BABYLON.Color3(0.5,0.6,0.87);5
// //物体的发光颜色
// myMaterial.emissivecolor =new BABYLON.Color3(1,1,1);7
// //物体的环境反射颜色
// myMaterial.ambientcolor =new BABYLON.Color3(0.23,0.98,0.53);
// 渲染
engine.runRenderLoop(() => {
  scene.render();
});
// 监听浏览器大小变化
window.addEventListener("resize", () => {
  engine.resize();
});